<script setup lang="ts">
  import { ref, computed, defineEmits, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { byItem } from '@/api/inventory-management';
  import { Notification } from '@arco-design/web-vue';
  import * as XLSX from 'xlsx';
  import { saveAs } from 'file-saver';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const aoCode = ref<string>('');
  const barcode = ref<string>('');
  const batchNo = ref<string>('');
  const deliveryShop = ref<string>('');
  const endDate = ref<string>('');
  const inEmpCode = ref<string>('');
  const itemCode = ref<string>('');
  const mParentNumber = ref<string>('');
  const mProductNumber = ref<string>('');
  const productCode = ref<string>('');
  const qualityCode = ref<string>('');
  const requireShop = ref<string>('');
  const restCount = ref<string>('1');
  const startDate = ref<string>('');
  const wmsDeliveryPlanId = ref<string>('');
  const wmsItemInventoryId = ref<string>('');
  const tableData = ref<any>();
  const version = ref<string>('');
  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);
  // 发送搜索数据
  const flowQueryData: any = ref({
    searchParam: computed(() => ({
      aoCode: aoCode.value,
      barcode: barcode.value,
      batchNo: batchNo.value,
      deliveryShop: deliveryShop.value,
      endDate: endDate.value,
      inEmpCode: inEmpCode.value,
      itemCode: itemCode.value,
      mParentNumber: mParentNumber.value,
      mProductNumber: mProductNumber.value,
      productCode: productCode.value,
      qualityCode: qualityCode.value,
      requireShop: requireShop.value,
      startDate: startDate.value,
      wmsItemInventoryId: wmsItemInventoryId.value,
      wmsDeliveryPlanId: wmsDeliveryPlanId.value,
      restCount: restCount.value,
      version: version.value,
    })),
    page: computed(() => ({
      pageSize: pageSize.value,
      currentPage: pageNumber.value,
    })),
  });
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '条码',
      dataIndex: 'barcode',
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '父型号',
      dataIndex: 'mParentNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '物料名称',
      dataIndex: 'itemName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '需求单位',
      dataIndex: 'invShop',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '当前库存',
      dataIndex: 'currentOnHandQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接数量',
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'ERP出库数量',
      dataIndex: 'erpoutQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '非离库占用',
      dataIndex: 'engagedQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '离库占用',
      dataIndex: 'takeAwayEngagedQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '入库人',
      dataIndex: 'inEmpCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '移交单位',
      dataIndex: 'deliveryShop',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '入库日期',
      dataIndex: 'inventoryDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '供应商',
      dataIndex: 'srmSupplyId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '架次',
      dataIndex: 'startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '限用架次',
      dataIndex: 'xLimitLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '备注',
      dataIndex: 'REMARK',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接单id',
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '台账id',
      dataIndex: 'wmsItemInventoryId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '版本号',
      dataIndex: 'version',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  // 表格数据

  async function handleSearch() {
    const newData = await byItem(flowQueryData.value);
    emit('updateArray', newData);
    tableData.value = newData;
  }
  // 重置
  function reset() {
    productCode.value = '';
    batchNo.value = '';
    restCount.value = '1';
    itemCode.value = '';
    qualityCode.value = '';
    mProductNumber.value = '';
    mParentNumber.value = '';
    inEmpCode.value = '';
    deliveryShop.value = '';
    requireShop.value = '';
    barcode.value = '';
    wmsItemInventoryId.value = '';
    wmsDeliveryPlanId.value = '';
    aoCode.value = '';
    startDate.value = '';
    endDate.value = '';
    pageNumber.value = 1;
    handleSearch();
  }
  // 导出参数
  function exportParam(excelData: any, excelColumns: any) {
    const emptyRows = Array(1).fill({});
    const dataWithEmptyRows = emptyRows.concat(excelData);
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(dataWithEmptyRows, {
      header: excelColumns.map((h: any) => h.dataIndex),
      skipHeader: true,
    });
    XLSX.utils.sheet_add_aoa(
      ws,
      [excelColumns.map((itemName: any) => itemName.title)],
      {
        origin: 'A1', // 表头开始的位置
      }
    );
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      'export.xlsx'
    );
  }
  async function toExcel() {
    if (!tableData.value) {
      Notification.warning({
        title: '警告',
        content: '当前页面无需要导出数据',
        closable: true,
      });
      return;
    }
    const excelData: any = ref({
      searchParam: {
        aoCode: aoCode.value,
        barcode: barcode.value,
        batchNo: batchNo.value,
        deliveryShop: deliveryShop.value,
        endDate: endDate.value,
        inEmpCode: inEmpCode.value,
        itemCode: itemCode.value,
        mParentNumber: mParentNumber.value,
        mProductNumber: mProductNumber.value,
        productCode: productCode.value,
        qualityCode: qualityCode.value,
        requireShop: requireShop.value,
        startDate: startDate.value,
        wmsItemInventoryId: wmsItemInventoryId.value,
        wmsDeliveryPlanId: wmsDeliveryPlanId.value,
        restCount: restCount.value,
      },
      page: {
        pageSize: 1000000,
        currentPage: 1,
      },
    });
    const excelDatas = await byItem(excelData.value);
    // 根据列数据保留表数据，过滤多余的表格数据
    const filteredData = excelDatas.list.map((item: any) => {
      const newItem: any = {};
      columns.forEach((column: any) => {
        if (column.dataIndex in item) {
          newItem[column.dataIndex] = item[column.dataIndex];
        }
      });
      return newItem;
    });
    exportParam(filteredData, columns);
  }
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 29) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <!-- 第一行 -->
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="barcode"
          placeholder="条码"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="productCode"
          placeholder="机型"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="batchNo"
          placeholder="批次"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <!-- <a-col :span="6">
      <div>
        <a-input v-model="aoCode" placeholder="AO号" size="large" allow-clear />
      </div>
    </a-col> -->
    <a-col :span="6">
      <a-input
        v-model="wmsDeliveryPlanId"
        placeholder="交接单ID"
        size="large"
        allow-clear
      />
    </a-col>
  </a-row>
  <!-- 第二行 -->
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="itemCode"
          placeholder="图号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="mProductNumber"
          placeholder="型号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="mParentNumber"
          placeholder="父件型号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="qualityCode"
          placeholder="质量编号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>
  <!-- 第三行 -->
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="inEmpCode"
          placeholder="入库人"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="deliveryShop"
          placeholder="移交单位"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="requireShop"
          placeholder="需求单位"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="version"
          placeholder="版本号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>
  <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
    
    <a-col :span="6">
      <a-select
        v-model="restCount"
        placeholder="库存数量"
        size="large"
        allow-clear
      >
        <a-option value="0">无库存</a-option>
        <a-option value="1">有库存</a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="startDate"
        style="width: 100%"
        placeholder="入库起始时间"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="endDate"
        style="width: 100%"
        placeholder="入库结束时间"
        size="large"
        allow-clear
      />
    </a-col>
  </a-row>
  <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    <a-button class="btn-reset" type="primary" size="large" @click="toExcel"
      >导出EXCEL</a-button
    >
  </div>
</template>

<style scoped>
  .grid-demo {
    margin-top: 15px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
